<template>
	<view>
		<view class="bglucky clearfix">
			<view class="half">
				<router-link class="flex-1" to="/pages/index/integral_details">
					<view class="txt1">我的积分</view>
					<view class="txt2">{{integral}}</view>
				</router-link>
			</view>
			<view class="half">
				<router-link class="flex-1" to="/bundle_b/pages/lucky_wheel/lucky_prize">
					<view class="txt1">我的奖品</view>
					<view class="txt2">{{drawLog_num}}</view>
				</router-link>
			</view>
		</view>
		<LuckyGrid ref="myLucky" width="600rpx" height="600rpx" :blocks="blocks" :prizes="prizes" :buttons="buttons" @start="startCallBack" @end="endCallBack"/>
		<view class="rules">
				<view class="r-t">规则说明</view>
				<view class="r-t"><text>{{configText}}</text></view>	
		</view>
	</view>
</template>

<script>
	import {
		getDrawLists,
		apiDraw
	} from "@/api/store";
	import LuckyGrid from '@/components/@lucky-canvas/uni/lucky-grid'
	export default {
		components: {LuckyGrid },
		data() {
			return{
				drawLog_num:0,
				prizeGoodsType:'',
				configText:'',
				integral:0,
				blocks: [

			      { padding: '20px', background: '#fcb645',borderRadius:'30px', },
			      { padding: '10px', background: '#f1375f',borderRadius:'20px', },
			    ],
			    prizes: [],
				buttons: [
			      {
			        x: 1, y: 1,
			        background: '#edc283',
			        fonts: [{ text: '开始', top: '34%' }],
			      },
			    ],
			    defaultStyle: {
			      background: '#b8c5f2'
			    },
		    	prizeData:{}
			}
		},

		onLoad: function(options) {
			this.getDrawLists()
		},

		methods: {
			getDrawLists() {
				getDrawLists({
					
				}).then(res => {
					if (res.code == 1) {
						this.integral=res.data.user_list.user_integral
						this.drawLog_num=res.data.drawLog_num
						this.configText=res.data.config.instructions
						var drawData=res.data.draw_list
						this.prizes=[]
						var x=0
						var y=0
						for(var i=0;i<drawData.length;i++){
							if(i==0){
								x=0
								y=0
							}else if(i==1){
								x=1
								y=0
							}else if(i==2){
								x=2
								y=0
							}else if(i==3){
								x=2
								y=1
							}else if(i==4){
								x=2
								y=2
							}else if(i==5){
								x=1
								y=2
							}else if(i==6){
								x=0
								y=2
							}else if(i==7){
								x=0
								y=1
							}
							var text=''
							
							if(drawData[i].type==1){
								text=drawData[i].integral+'积分'
							}else if(drawData[i].type==2){
								text=drawData[i].coupon
							}else if(drawData[i].type==3){
								text=drawData[i].physical_name
							}else if(drawData[i].type==4){
								text='谢谢参与'
							}
							this.prizes.push({
								id:drawData[i].id,
								x:x,
								y:y,
								fonts:[{
									text:text,
									fontSize:'10px',
									fontColor: '#f5335e',
			          				top: '56px'
								}],
								imgs:[{
									width:'40px',height:'40px',
									src:drawData[i].image,
									fontColor: '#f5335e',
			          				top: '10px'
								}],
								background:"#FFFFFF"
							})
						}
					}
				});
			},
			// 点击抽奖按钮触发回调
		    startCallBack () {

		        // 先开始旋转
		          apiDraw({
					}).then(res => {
						console.log(res.code)
						if (res.code == 1) {
							if(res.msg!=''){
								this.$toast({
									title: res.msg
								});
								return
							}
						console.log(res.code)
							this.$refs.myLucky.play()
							this.prizeData=res.data
							
		        			// 使用定时器来模拟请求接口
							for(var i=0;i<this.prizes.length;i++){
								if(res.data.goods){
									if(res.data.goods.id==this.prizes[i].id){
										// 调用stop停止旋转并传递中奖索引
										setTimeout(() => {
											console.log(i)
											this.prizeData=res.data
						          			this.$refs.myLucky.stop(i)
						          		}, 3000)
						          		return
									}
									this.prizeGoodsType=1
								}else{
									if(res.data.id==this.prizes[i].id){
										// 调用stop停止旋转并传递中奖索引
										setTimeout(() => {
											console.log(i)
											this.prizeData=res.data
						          			this.$refs.myLucky.stop(i)
						          		}, 3000)
						          		return
									}

									this.prizeGoodsType=2
								}
								
							}
						}
					});
		      },
		    // 抽奖结束触发回调
		    endCallBack (prize) {
		    	if(this.prizeGoodsType==1){
		    		this.$toast({
						title: this.prizeData.goods.name
					});
					setTimeout(() => {
						uni.navigateTo({
			    		url:'/bundle/pages/integral_settlement/integral_settlement_prize?obj='+JSON.stringify(this.prizeData)
			    	})
	          		}, 2000)
		    		
		    	}else{
		    		if(this.prizeData.type==1){
			    		this.$toast({
							title: this.prizeData.integral+'积分'
						});
					}else if(this.prizeData.type==2){
						this.$toast({
							title: this.prizeData.coupon
						});
					}else if(this.prizeData.type==4){
						this.$toast({
							title: '谢谢参与'
						});
					}
		    	}
		    	
				this.getDrawLists()
		        // 奖品详情
		        console.log(prize)
		    }
		}
	};
</script>
<style lang="scss">
	.bglucky{
		display:flex;
		text-align: center;
		background-color: #f5335e;
		color: #ffffff;
		padding: 40rpx 0 60rpx;
		border-radius: 100% 100% 100% 100% / 0 0 30% 30%;
		margin-bottom: 60rpx;
	}
	.half{
		flex:1;
		padding: 0 30rpx;
	}
	.txt1 {
	  font-size: 32rpx;
	  padding: 20rpx 0;
	}

	.txt2 {
	  font-size: 64rpx;
	  font-weight: 900;
	  padding-left: 10rpx;
	}
	.rules{
		margin-top: 30rpx
	}
	.r-t{
		padding: 10rpx 30rpx
	}
</style>
